<script setup lang="ts">
import { ref } from 'vue';
import { Search } from '@element-plus/icons-vue';
import dayjs from 'dayjs';
import {getDocInfo } from '@/api/apply';

interface dataForm{
  docid: string;
  material_origina: string;
  material_replacea: string;
  material_product: string;
  unit?: string;
  amount?: number;
  start_time: string;
  end_time: string;
  org_code?: string;
  end_status: string;
  applier?: string;
  apply_date?: string;
  current_flow?: number;
  current_flow_phase?: string;
  query_type?: string;
  page: number
}

const queryFormPara = ref<dataForm>({
    docid: "",
    material_origina: "",
    material_replacea: "",
    material_product: "",
    start_time: dayjs(new Date().setMonth(new Date().getMonth() - 3)).format("YYYY-MM-DD"),
    end_time: dayjs().format("YYYY-MM-DD"),
    page: 1,
    end_status: ""
})
const queryFormItems = ref<dataForm[]>([])
const counts = ref(0)
//查詢
function searchResult(){
  let username = {
    username : localStorage.getItem("username")?.toString() === undefined ? "":localStorage.getItem("username")?.toString()
  }
  queryFormPara.value.query_type = "count"
  getDocInfo(JSON.stringify({...username,...queryFormPara.value})).then((res:any)=>{
    queryFormItems.value = []
    if(res[0].c_count > 0){
        counts.value = res[0].c_count
        queryFormPara.value.query_type = "list"
        getDocInfo(JSON.stringify({...username,...queryFormPara.value})).then((res:any)=>{
            res.forEach((item:dataForm) => {
                queryFormItems.value.push(item)
            });
        })
    }
    else{
        counts.value = 0
    }
  })
}
//日期格式
function formatter(date: string) {
  if (date) {
    return dayjs(date).format("YYYY-MM-DD");
  }
}
//成品料號過長摺疊
function collapseProduct(cellvalue:string){
  return cellvalue.length <= 16 ? cellvalue : cellvalue.substring(0,13)+"..."; 
}
function collapseProductReason(cellvalue:string){
  return cellvalue.length <= 8 ? cellvalue : cellvalue.substring(0,5)+"..."; 
}
function handleCurrentChange(){
  searchResult()
}

function rowspanMethod(data: any) {
  const fields = ["docid","org_code","end_status","apply_date"];
  const { $rowIndex, column, row, visibleData } = data;
  //獲取單元格的值
  const cellvalue = row["docid"];
  if (cellvalue && fields.includes(column.field)) {
    let prevRow = visibleData[$rowIndex - 1];
    let nextRow = visibleData[$rowIndex + 1];
    if (prevRow && prevRow["docid"] === cellvalue) {
      return { rowspan: 0, colspan: 0 };
    } else {
      let countRowspan = 1;
      while (nextRow && nextRow["docid"] === cellvalue) {
        nextRow = visibleData[++countRowspan + $rowIndex];
      }
      if (countRowspan > 1) {
        return { rowspan: countRowspan, colspan: 1 };
      }
    }
  }
}
</script>

<template>
    <div class="docinfo-box" style="padding: 20px 20px;">
      <el-form :model="queryFormPara" :inline="true" style="width: 1100px">
        <el-form-item label="單號" style="padding-left: 42px">
          <el-input v-model.trim="queryFormPara.docid" style="width: 180px" />
        </el-form-item>
        <el-form-item label="日期開始">
          <el-date-picker
            v-model="queryFormPara.start_time"
            style="width: 180px"
            value-format="YYYY-MM-DD"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="日期結束">
          <el-date-picker
            v-model="queryFormPara.end_time"
            style="width: 180px"
            value-format="YYYY-MM-DD"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="狀態">
          <el-select v-model="queryFormPara.end_status" style="width: 80px;">
            <el-option :key="0" value=""></el-option>
            <el-option :key="1" value="是">是</el-option>
            <el-option :key="2" value="否">否</el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="原料號" style="padding-left: 28px">
          <el-input v-model.trim="queryFormPara.material_origina" style="width: 180px" />
        </el-form-item>
        <el-form-item label="替代料號">
          <el-input v-model.trim="queryFormPara.material_replacea" style="width: 180px" />
        </el-form-item>
        <el-form-item label="成品料號">
          <el-input v-model.trim="queryFormPara.material_product" style="width: 180px" />
        </el-form-item>
        <el-form-item>
          <el-button
            color="#626aef"
            :icon="Search"
            style="width: 120px"
            @click="searchResult"
            >查詢</el-button
          >
        </el-form-item>
      </el-form>
      <vxe-table :data="queryFormItems" :column-config="{ resizable: true }" align="center" border stripe :span-method="rowspanMethod">
        <vxe-column field="docid" align="center" title="單號" width="150" > 
          <template v-slot="{ row }">
            <span class="docinfo-table-text">{{ row.docid }}</span>
          </template>
        </vxe-column>
        <vxe-column field="org_code" align="center" title="廠區" width="60"> 
          <template v-slot="{ row }">
            <span class="docinfo-table-text">{{ row.org_code }}</span>
          </template>
        </vxe-column>
        <vxe-column field="material_origina" align="center" title="原料號" width="140"> 
          <template v-slot="{ row }">
            <span class="docinfo-table-text">{{ row.material_origina }}</span>
          </template>
        </vxe-column>
        <vxe-column field="material_replacea" align="center" title="替代料號" width="140"> 
          <template v-slot="{ row }">
            <span class="docinfo-table-text">{{ row.material_replacea }}</span>
          </template>
        </vxe-column>
        <vxe-column field="material_product" align="center" title="成品料號" width="140"> 
            <template v-slot="{row}">
            <el-popover title="成品料號" :width="200"  effect="dark" trigger="hover">
              <template #reference>
                <span>{{ collapseProduct(row.material_product) }}</span>
              </template>
              <span>{{ row.material_product }}</span>
            </el-popover>
          </template>
        </vxe-column>
        <vxe-column field="unit" title="單位" align="center" width="60"> 
          <template v-slot="{ row }">
            <span class="docinfo-table-text">{{ row.unit }}</span>
          </template>
        </vxe-column>
        <vxe-column field="amount" title="數量" align="center" width="80"> 
          <template v-slot="{ row }">
            <span class="docinfo-table-text">{{ row.amount }}</span>
          </template>
        </vxe-column>
        <vxe-column field="replace_reason" title="原因" align="center" width="80"> 
          <template v-slot="{row}">
            <el-popover title="原因" :width="100"  effect="dark" trigger="hover">
              <template #reference>
                <span>{{ collapseProductReason(row.replace_reason) }}</span>
              </template>
              <span>{{ row.replace_reason }}</span>
            </el-popover>
          </template>
        </vxe-column>
        <vxe-column field="replace_comments" title="備註" align="center" width="100"> 
          <template v-slot="{row}">
            <el-popover title="備註" :width="100"  effect="dark" trigger="hover">
              <template #reference>
                <span>{{ collapseProductReason(row.replace_comments) }}</span>
              </template>
              <span>{{ row.replace_comments }}</span>
            </el-popover>
          </template>
        </vxe-column>
        <vxe-column field="start_time" align="center" width="120" title="起始日期">
          <template v-slot="{ row }">
            <span class="docinfo-table-text">{{ formatter(row.start_time) }}</span>
          </template>
        </vxe-column>
        <vxe-column field="end_time" align="center" width="120" title="結束日期"> 
          <template v-slot="{ row }">
            <span class="docinfo-table-text">{{ formatter(row.end_time) }}</span>
          </template>
        </vxe-column>
        <vxe-column field="apply_date" align="center" width="120" title="申請日期"> 
          <template v-slot="{ row }">
            <span class="docinfo-table-text">{{ formatter(row.apply_date) }}</span>
          </template>
        </vxe-column>
        <vxe-column field="chinese_name" title="申請人" align="center" width="100"> 
          <template v-slot="{ row }">
            <span class="docinfo-table-text">{{ row.chinese_name }}</span>
          </template>
        </vxe-column>
        <vxe-column field="end_status" align="center" min-width="80" title="狀態"> 
          <template v-slot="{ row }">
            <span class="docinfo-table-text">{{ row.end_status === 'Y' ? '已結案':'未結案' }}</span>
          </template>
        </vxe-column>
      </vxe-table>
      <el-pagination
      background
      layout="prev, pager, next"
      :total="counts"
      v-model:current-page="queryFormPara.page"
      :hide-on-single-page="counts / 10 < 1"
      @current-change="handleCurrentChange"
      style="margin: 20px auto; width: 200px"
      :page-size="8"
    />
    </div>
</template>

<style>
.vxe-body--row td{
  vertical-align: middle;
}


.docinfo-table-text{
    font-size: 14px;
    color: #171616;
    font-weight: 450;
}
</style>